<template>
	<view class='addWay'>
		<view class='container'>
			<view class='wayIcon imgPublic'>
				<image src="https://wx.gdxixiashi.com/public/images/person/yinhangka@2x.png" mode="widthFix"></image>
			</view>
			<view class='form'>
				<view class='yinhangka'>
					<view class='line'>
						<view class='lineTit'>开户名</view>
						<view class='lineVal'><input type="text" v-model="trueName" placeholder="输入持卡人名称"></view>
					</view>
					<view class='line'>
						<view class='lineTit'>预留手机号</view>
						<view class='lineVal'><input type="number" v-model="tel" placeholder="输入预留手机号"></view>
					</view>
					<view class='line'>
						<view class='lineTit'>银行卡号</view>
						<view class='lineVal'><input type="number" v-model="account" placeholder="输入银行卡号"></view>
					</view>
					<view class='line'>
						<view class='lineTit'>开户银行</view>
						<view class='lineVal'><input type="text" v-model="bank_name" placeholder="输入开户银行如:招商银行深圳分行高新园支行"></view>
					</view>
				</view>
			</view>
			<view class="status dFlex jStart_aCenter" @tap.stop='agree = !agree'>
				<view class="statusIcon imgPublic">
					<image v-if="!agree" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
					<image v-if="agree" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
				</view>
				<view class="toast">
					本人已阅读并同意<text @tap.stop='goPage(6,1)'>用户协议</text>和<text @tap.stop='goPage(6,2)'>隐私政策</text>内容
				</view>
			</view>
		</view>
		<view class='btns' @tap='saveBank'>保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trueName:'',
				tel:"",
				account:'',
				bank_name:'',
				agree:false,
			}
		},
		onLoad(){
			
		},
		onShow(){},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 保存银行卡
			saveBank(){
				if(!this.agree){
					uni.showToast({
						title:'请先阅读并同意相关政策和协议内容',
						icon:"none"
					})
					return
				}
				if(!this.trueName){
					uni.showToast({
						title:'持卡人姓名不能为空',
						icon:"none"
					})
					return
				}
				if(!this.tel){
					uni.showToast({
						title:'预留手机号不能为空',
						icon:"none"
					})
					return
				}
				if(!this.account){
					uni.showToast({
						title:'卡号不能为空',
						icon:"none"
					})
					return
				}
				if(!this.bank_name){
					uni.showToast({
						title:'银行名称不能为空',
						icon:"none"
					})
					return
				}
				this.tool.getData('User/bankchange',{
					memberId:uni.getStorageSync('userId'),
					trueName:this.trueName,
					account:this.account,
					tel:this.tel,
					bank_name:this.bank_name,
				}).then(res=>{
					console.log(res);
					if(res){
						uni.showToast({
							title:'信息已保存',
							icon:"success"
						})
						setTimeout(()=>{
							this.tool.back();
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			goPage(idx,status){
				if(idx == '6'){ 
					uni.navigateTo({
						url:'./xieyi?status='+status,
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.addWay{
		width: 100%;
		.container{
			width: 100%;
			background: white;
			padding:24upx 4%;
			box-sizing: border-box;
			.status{
				width: 100%;
				margin-top: 12px;
				text{
					color: #1664FF;
				}
				.statusIcon{
					width: 15px;
					height: 15px;
					margin-right: 12px;
				}
			}
			.form{
				width: 100%;
				.line{
					padding: 25upx 0;
					border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
					.lineTit{
						font-size: 13px;
						color: #959494;
						margin-bottom: 24upx;
					}
					.wayImg{
						width: 200upx;
						height: 200upx;
					}
				}
			}
			.wayIcon{
				width: 40%;
				margin: 30upx auto 50upx;
			}
		}
		.btns{
			width: 100%;
			position: fixed;
			left:0;
			bottom: 0;
			color: white;
			background: linear-gradient(#609ff8 0%, #1664ff 100%);
			border-radius: 5px;
			padding: 12px 0;
			text-align: center;
		}
	}
</style>
